<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>获取元素位置</title>
   <script src="jquery-1.11.3.min.js"></script>
   <style>
     *{
	    margin:0px;
		padding:0px;
	 }
     .div1{
	    width:200px;
		height:200px;
	    background-color:red;
		margin-left:200px;
		margin-top:50px;
		position:relative;
	 }
	 .div2{
	    width:100px;
		height:100px;
		background-color:yellow;
		position:absolute;
		top:50px;
		left:50px;
	 }
     
   </style>
 </head>
 <body>
    <div class="div1">
	   <div class="div2"></div>
	</div>
 </body>
 <script>
    var $_offset1 = $(".div1").offset();
	console.log("div1:"+$_offset1.top+";"+$_offset1.left);
	var $_offset2 = $(".div2").offset();
	console.log("div2:"+$_offset2.top+";"+$_offset2.left);

    var $_position1 = $(".div1").position();
	console.log("div1:"+$_position1.top+";"+$_position1.left);
	var $_position2 = $(".div2").position();
	console.log("div2:"+$_position2.top+";"+$_position2.left);
 </script>
</html>
